<template>
  <div class="search-container">
    <form action="/"
      class="search-form">
      <!-- @cancel="onCancel"点击取消触发事件 -->
      <van-search v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isResultShow=false" />
    </form>
    <!-- 搜索结果 -->
    <search-result v-if="isResultShow"
      :search-text="searchText" />
    <!-- /搜索结果 -->

    <!-- 搜索联想建议 -->
    <!-- :search-text='searchText' 加冒号动态绑定数据-->
    <search-suggestion v-else-if="searchText"
      :search-text='searchText'
      @search='onSearch' />
    <!-- /搜索联想建议 -->

    <!-- 搜索历史记录 -->
    <search-history v-else
      :search-histories='searchHistories'
      @clear-search-histories='searchHistories=[]'
      @search='onSearch' />
    <!-- @clear-search-histories='searchHistories=[]点击全部删除   将历史记录的值设置为空数组 -->
    <!-- /搜索历史记录 -->

  </div>
</template>

<script>
import SearchHistory from './components/search-history.vue'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
import { setItem, getItem } from '@/utils/storage'

export default {
  // 组件名称
  name: 'SearchIndex',
  // 局部注册的组件
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      searchText: '',
      // 定义搜索结果页面是否展示
      isResultShow: false,
      // 存储搜索历史记录
      // 本地存储有历史搜索数据就用本地存储的   没有就是为空数组
      searchHistories: getItem('TOUTIAO_SEARCH_HISTORIES') || []
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    // 监听搜索历史值的变化
    searchHistories (value) {
      // 将监听到值的变换存储到本地存储中去
      setItem('TOUTIAO_SEARCH_HISTORIES', value)
    }
    // 完整写法
    // searchHistories: {
    //   handler () {

    //   }
    // }
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 点击搜索  添加搜索历史记录
    onSearch (val) {
      // console.log(val)
      // 更新文本框内容
      this.searchText = val
      // 不要有重复的历史记录
      const index = this.searchHistories.indexOf(val)
      if (index !== -1) {
        // index不等于-1就是说searchHistories里有跟val一样的值   把历史记录原来的值删除
        this.searchHistories.splice(index, 1)
      }
      // unshift把最新的值插入到数组的最前面
      this.searchHistories.unshift(val)
      // 点击搜索展示搜索结果页面
      this.isResultShow = true
    },
    onCancel () {
      // console.log('onCancel')
      this.$router.back()
    }
  }
}
</script>

<style scoped lang="less">
.search-container {
  padding-top: 108px;
  .van-search__action {
    color: #fff;
  }
  .search-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
